<template>
      <div>
            <!-- 面包屑导航 -->
            <breadcrumb first="商品管理" second="商品分类"></breadcrumb>

            <!-- 卡片 -->
            <el-card>
                  <el-button class="addCate" type="primary" size="small" @click="showAddDialogVisible">添加分类</el-button>
                  <!-- 表格 -->
                  <tree-table :data="cateList" 
                        :columns="columns" 
                        :selection-type="false"
                        :expand-type="false"
                        show-index
                        index-text="#"
                        border
                        :show-row-hover="false">
                        <!-- 是否有效 -->
                        <template slot="isok" slot-scope="scope">
                              <i class="el-icon-success" :class="scope.row.cat_deleted ? 'hidden' : 'success'"></i>
                              <i class="el-icon-error" :class="!scope.row.cat_deleted ? 'hidden' : 'erroe'"></i>
                        </template>

                        <!-- 排序 -->
                        <template slot="sort" slot-scope="scope">
                              <el-tag :type="scope.row.cat_level === 0 ? '' : scope.row.cat_level === 1 ? 'success' : 'warning'">{{scope.row.cat_level === 0 ? '一级' : scope.row.cat_level === 1 ? '二级' : '三级'}}</el-tag>
                        </template>

                        <!-- 操作 -->
                        <template slot="operate" slot-scope="scope">
                              <el-button type="primary" size="mini">
                                    <i class="el-icon-edit"></i>编辑
                              </el-button>
                              <el-button type="warning" size="mini">
                                    <i class="el-icon-delete"></i>删除
                              </el-button>
                        </template>
                        
                  </tree-table>
                  <!-- 分页 -->
                  <el-pagination
                        @size-change="sizeChange"
                        @current-change="pageChange"
                        :current-page="queryInfo.pagenum"
                        :page-sizes="[1, 2, 5, 10]"
                        :page-size="queryInfo.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                  </el-pagination>

                  <!-- 添加分类弹出框 -->
                  <el-dialog title="添加分类"
                        :visible.sync="addDialogVisible"
                        width="40%"
                        @close="addCateClose">
                        <!-- 表单主体 -->
                        <el-form :model="addCateForm" :rules="addRules" ref="addCateRef" label-width="100px">
                              <el-form-item label="分类名称：" prop="cat_name">
                                    <el-input v-model="addCateForm.cat_name"/>
                              </el-form-item>

                              <el-form-item label="父级分类：">
                                    <el-cascader clearable change-on-select
                                          v-model="selectedParentCate"
                                          :options="parentCateList"
                                          :props="cascaderProps">
                                    </el-cascader>
                              </el-form-item>

                        </el-form >
                        <!-- 表单footer -->
                        <span slot="footer">
                              <el-button @click="addDialogVisible = false">取 消</el-button>
                              <el-button type="primary" @click="addCate">确 定</el-button>
                        </span>
                  </el-dialog>

            </el-card>
      </div>
</template>

<script>
import BreadCrumb from '../breadcrumb'
export default {
      components: {
            breadcrumb: BreadCrumb
      },

      data(){
            return {
                  cateList: [],
                  total: 0,
                  columns: [
                        {label: "分类名称", prop: 'cat_name'},
                        {label: "是否有效", type:'template', template:'isok'},//作用于插槽
                        {label: "排序", type:'template', template:'sort'},
                        {label: "操作", type:'template', template:'operate'},
                  ],
                  queryInfo: {
                        type: 3,
                        pagenum: 1,
                        pagesize: 2,
                  },
                  addDialogVisible: false,      //添加分类弹出框是否显示
                  addCateForm: {
                        cat_name: '',
                        cat_pid: 0,
                        cat_level: 0,     //默认添加一级分类
                  },
                  addRules: {
                        cat_name: [
                              {required: true, message: '请输入分类名称', trigger: 'blur'},
                        ],
                  },
                  parentCateList: [],     //父级分类列表
                  selectedParentCate: [], //选中的父级分类
                  cascaderProps:{
                        expandTrigger: 'hover',
                        label: "cat_name",
                        value: "cat_id",
                        children:'children'
                  }
            }
      },

      mounted(){
            this.getCategories();
      },

      methods: {
            // 获取分类列表
            async getCategories(){
                  const {data: res} = await this.$http.get('/categories', {params: this.queryInfo})
                  if(res.meta.status !== 200){
                        return this.$message.error(res.meta.msg);
                  }
                  this.total = res.data.total;
                  this.cateList = res.data.result;
            },
            // 分页size改变
            sizeChange(size){
                  this.queryInfo.pagesize = size;
                  this.getCategories();
            },
            // 当前页码改变
            pageChange(page){
                  this.queryInfo.pagenum = page;
                  this.getCategories();
            },
            //展示添加分类对话框
            async showAddDialogVisible(){
                  const {data: res} = await this.$http.get('/categories', {params: {type: 2}});
                  if(res.meta.status !== 200){
                        return this.$message.error(res.meta.msg);
                  }
                  this.addDialogVisible = true;
                  this.parentCateList = res.data;
                  console.log(this.parentCateList)
            },
            //关闭添加分类弹出框
            addCateClose(){
                  this.selectedParentCate = [];
                  this.addCateForm.cat_name = '';
            },
            //调用api添加分类
            addCate(){
                  this.$refs.addCateRef.validate(async valid => {
                        if(!valid)  return;
                        this.addCateForm.cat_pid = this.selectedParentCate[this.selectedParentCate.length-1] || 0;
                        this.addCateForm.cat_level = this.selectedParentCate.length;
                        const {data: res} = await this.$http.post('/categories', this.addCateForm);
                        this.addDialogVisible = false;
                        if(res.meta.status !== 201)   return this.$message.error(res.meta.msg);
                        
                        this.getCategories();
                        return this.$message.success(res.meta.msg);
                  })
            }
           
      }

}
</script>

<style scoped>
.addCate{
      margin-bottom: 15px;
}
.hidden{
      display: none;
}
.success{
      color: chartreuse;
      font-size: 16px;
}
.error{
      color: crimson;
      font-size: 16px;
}
.el-cascader{
      width: 100%;
}
</style>